// 导入处理路径的模块
const path = require("path");

var MiniCssExtractPlugin = require("mini-css-extract-plugin");

const {
  generateEntries,
  generateHtmlWebpackPlugins,
} = require("./generator/entryHtmlMapper");

// 自动获取多入口的entry集合，并生成html模块插件数组
const entry = generateEntries();
const htmlTemplates = generateHtmlWebpackPlugins(entry);

// 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理
// 这个配置，起始就是一个JS文件，通过 Node中的模块操作，向外暴露了一个配置对象
module.exports = {
  mode: "development", // webpack4.x以上版本语法更严格了，需要指定"development"或"production"模式，不然启动报错，详情：https://webpack.js.org/configuration/mode/
  entry, //入口脚本文件，表示要使用webpack打包哪个文件，多入口多页面配置
  output: {
    filename: "[name].[contenthash:8].js", // 配置输出的文件名
    path: path.resolve(__dirname, "dist"), // 配置输出的路径，指定 打包好的文件，输出到哪个目录中去
    // // 这个是webpack5 配置 自动清空 path路径下的值, 然后重新打包
    clean: true,
    library: {
      // 导出一个全局的变量
      name: "ltLib",
      type: "var",
    },
  },
  // 开启调试追踪模式，例a.js,b.js,c.js打包成一个bundle.js，若其中一个js报错了，那么只会追踪到bundle.js，并不会追踪到当前异常的js源文件
  devtool: "inline-source-map",
  // devServer配置指南：https://webpack.js.org/configuration/dev-server，这个插件只会在内存中生成映射文件，并不会在dit目录中生成
  devServer: {
    static: path.join(__dirname, "./dist"), // 从哪里查找编译后的js文件
    hot: false, // 启用热更新的第1步
    open: true, // 自动打开浏览器
    port: 8080, // 设置启动时候的运行端口
  },
  // 添加plugins节点配置插件，只要是插件，都一定要放到plugins节点中去
  plugins: [...htmlTemplates, new MiniCssExtractPlugin()],
  module: {
    // 这个节点，用于配置 所有 第三方模块 加载器
    // 所有第三方模块的 匹配规则
    rules: [
      //  配置处理 .css 文件的第三方loader规则，遵循style-loader在前，css-loader在后，不然webpack可能报错,若用MiniCssExtractPlugin插件，需要删掉style-loader，两者是冲突的
      // { test: /\.css$/i, use: ['style-loader', 'css-loader'] },
      { test: /\.css$/i, use: [MiniCssExtractPlugin.loader, "css-loader"] },
      { test: /\.(js|jsx)$/i, use: "babel-loader", exclude: /node_modules/ },
      {
        test: /\.(png|jpg|gif|svg|ico)$/i,
        // 在 webpack5 中 css-loader 会对 url() 处理为require(),旧的assets loader与新的assets loader冲突
        type: 'javascript/auto',
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 4096,
              name: '[name].[ext]',
              outputPath: "images/",
              esModule: false,
            },
          },
        ],
      },
      {
        test: /\.(ttf|woff|woff2?)$/i,
        type: "asset/resource"
      },
    ],
  },
  // optimization: {
  //     runtimeChunk: 'single',
  // },
};
